<template>

	<template v-if="!data.list.length">
		<wd-status-tip image="collect" tip="用户无设备记录" />
	</template>
	<template v-else>
		<view class="device-list">
			<view class="device-li" v-for="(d,index) in data.list">
				<view class="device-li-header">
					<text>{{d.device}}</text>
					<text>{{d.create_date}}</text>
				</view>
				<view class="device-li-info">
					<!-- 设备图标 -->
					<image class="device-li-info-icon"
						src="https://img1.baidu.com/it/u=3044350914,3247680391&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300"
						mode=""></image>
					<view class="device-li-info-data">
						<!-- 设备操作系统 -->
						<text class="device-li-title">系统:</text>
						<!-- 设备名称 -->
						<text class="device-li-name">名称:</text>
						<text class="device-li-name">版本:</text>
					</view>
				</view>
				<view class="device-li-footer">
					<view class="device-li-footer-left">

					</view>
					<view class="device-li-footer-right">
						<wd-button v-if="!d.if_default" type="warning" size="small" hairline @click="ClickSetDefaultDevice(d)">设为默认</wd-button>
						<wd-button type="error" size="small" hairline @click="ClickDeleteDevice(d,index)">删除</wd-button>
					</view>
				</view>
			</view>
		</view>
	</template>
</template>

<script setup>
	import overallRequest from "@/utool/http/http.js"
	import {
		computed,
		reactive
	} from 'vue'

	import {
		onReady,
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	
	const data = reactive({
		user: null,
		page: 1,
		pages: null,
		limit: 10,
		total: null,
		list: []
	})
	// 滚动页面底部
	onReachBottom(() => {
		let page = data.page
		let pages = data.pages
		if (page >= pages) {
			return
		} else {
			data.page++
			GetList()
		}
	})
	// 点击删除设备
	function ClickDeleteDevice(item,index) {
		let {id} = item 
		let user = data.user
		let url = "/Manage/DeleteUserDevice"
		uni.showModal({
			title: "确定要删除吗",
			cancelText: "我再想想",
			success(context) {
				overallRequest(url,{
					method:"POST",
					data:{
						user,id
					}
				}).then(res=>{
					data.list.splice(index,1)
				}).catch(err=>{
					console.log("err",err);
				})
			}
		})
	}
	
	// 设置默认设备
	function ClickSetDefaultDevice(item){
		let {id} = item
		let user = data.user
		let url = "/Manage/SetDefaultDevice"
		overallRequest(url,{
			method:"POST",
			data:{
				user,id
			}
		}).then(res=>{
			data.list.forEach(item=>{
				let itemID = item.id 
				if(itemID == id){
					item.if_default = true
				}else{
					item.if_default = false
				}
			})
		}).catch(err=>{
			console.log("err",err);
		})
	}
	// 获取设备列表
	function GetList() {
		let user = data.user
		let page = data.page
		let limit = data.limit
		let url = `/manage/GetUserDeviceList`
		overallRequest(url,{
			data:{
				user,page,limit
			}
		}).then(res => {
			let {
				page,
				pages,
				limit,
				total,
				list
			} = res.data
			data.page = page
			data.pages = pages
			data.limit = limit
			data.total = total
			data.list.push(...list)
		}).catch(err => {
			console.log(err);
		})
	}

	onLoad((query) => {

		let {
			user
		} = query

		if (!user) {
			uni.navigateBack()
		} else {
			data.user = user
			GetList()
		}
	})
</script>

<style>
	.device-list {
		padding: 30rpx 20px;
		background-color: #c3c3c344;
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	.device-li {
		display: flex;
		flex-direction: column;
		background-color: white;
		margin-bottom: 20rpx;
		padding: 20rpx 20rpx;
		border-radius: 10px;
		font-size: 25rpx;
	}

	.device-li-header {
		display: flex;
		justify-content: space-between;
		padding: 0px 5rpx;
		
	}

	.device-li-info {
		display: flex;
		margin: 18rpx 0rpx;
	}

	.device-li-info-icon {
		width: 90rpx;
		height: 90rpx;
		margin-right: 18rpx;
	}

	.device-li-info-data {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.device-li-footer {
		display: flex;
		border-top: 1rpx solid #d9d9d944;
		padding-top: 15rpx;
	}

	.device-li-footer-left {
		flex: 1;
	}

	.device-li-footer-right {
		display: flex;
		gap: 15rpx;
	}

	.device-li-title,
	.device-li-name {
		font-size: 24rpx;
		color: gray;
	}
</style>